import { Card } from 'antd';
import { useState } from 'react';
import style from '../index.less';
import { CloseOutlined } from '@ant-design/icons';



interface MyComponentProps {
  colorArr:string[];
  flag:string;
  color:string;
  penSize?:number
  setColor: (color: string) => void;
  setShowPanel: (flag: boolean) => void;
  setPenSize?:(size:number)=>void
}

const BoardPanel: React.FC<MyComponentProps> = ({ colorArr,flag,color,penSize,setColor,setShowPanel,setPenSize }) => {
  const [select, setSelect] = useState(color);

  return (
    <Card
      className={`${style.board} cardFlag ${style['ant-card-body']}`}
      title={flag === 'pen'?'画笔颜色':'画板背景颜色'}
    >
      <div className={style.icon}>
        <CloseOutlined onClick={()=>setShowPanel(false)} />
      </div>
      {flag ==='pen' &&
      <ul className={style.sizeContent}>
       {[5,10,15].map((item,index)=>{
        return (<li className={`${item ===penSize?style.active:null}`} key={index} onClick={()=>setPenSize?.(item)}>
          <label></label>
        </li>)
       })}
      </ul>
      }
      <ul className={style.content}>
        {/* vue和react渲染的区别 */}
        {colorArr.map((item, index) => {
          return (
            <li
              className={[style.item,item==='#fff'?style.shadow:''].join(' ')}
              key={index}
              style={{
                background: item,
              }}
              onClick={() => {
                setSelect(item);
                setColor(item);
              }}
            >
              <label
                className={`active ${
                  select === item ? (item === '#fff' ? style.activeBlack : style.activeWhite) : null
                }`}
              ></label>
            </li>
          );
        })}
      </ul>
    </Card>
  );
};

export default BoardPanel;
